<template>
  <q-card flat>
    <q-tabs
      dense
      v-model="pageTab"
      align="left"
      active-color="primary"
      @update:model-value="
        (val) => {
          router.push({
            path: '/personal/' + userId + '/' + val,
          });
        }
      "
    >
      <q-tab
        v-for="item in followTab"
        :key="item.code"
        :name="item.code"
        :label="item.text"
      />
    </q-tabs>
    <div class="absolute-right row items-center">
      <q-btn
        flat
        icon="refresh"
        @click="
          () => {
            if (pageTab == 'tag') {
              tagRef?.f5();
            } else if (pageTab == 'topic') {
              topicRef?.f5();
            }
          }
        "
      >
        <q-tooltip> 刷新 </q-tooltip>
      </q-btn>
    </div>
  </q-card>

  <q-tab-panels v-model="pageTab" animated>
    <q-tab-panel name="tag" class="q-pa-none">
      <TagPanel ref="tagRef" :user-id="props.userId"></TagPanel>
    </q-tab-panel>
    <q-tab-panel name="topic" class="q-pa-none">
      <TopicPanel ref="topicRef" :user-id="props.userId"></TopicPanel>
    </q-tab-panel>
  </q-tab-panels>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { followHas, followTab } from './shared';
import TagPanel from './follow-panel/TagPanel.vue';
import TopicPanel from './follow-panel/TopicPanel.vue';
import { useRouter } from 'vue-router';

const tagRef = ref<InstanceType<typeof TagPanel>>();
const topicRef = ref<InstanceType<typeof TopicPanel>>();
const props = defineProps<{
  userId: string;
  panelTab: string;
}>();

const router = useRouter();

const pageTab = ref(props.panelTab);

watch(
  () => props.panelTab,
  (val) => {
    if (followHas(val)) {
      pageTab.value = val;
    }
  },
);
</script>

<style scoped></style>
